<template>
  <div>
    <!-- el过渡动画 -->
    <transition name="el-fade-in-linear">
      <!-- 导航栏 -->
      <div
        v-show="toolbar.visible"
        @mouseenter="hoverEnter = true"
        @mouseleave="hoverEnter = false"
        :class="[
          { enter: toolbar.enter },
          {
            hoverEnter:
              (hoverEnter ||
                this.$route.path === '/favorite' ||
                this.$route.path === '/travel') &&
              !toolbar.enter,
          },
        ]"
        class="toolbar-content myBetween"
      >
        <!-- 网站名称 -->
        <div class="toolbar-title">
          <h2 @click="$router.push({ path: '/' })">
            {{ $store.state.webInfo.webName }}
          </h2>
        </div>

        <!-- 手机导航按钮 -->
        <div
          v-if="$common.mobile() || mobile"
          class="toolbar-mobile-menu"
          @click="changeSideBar"
          :class="{ enter: toolbar.enter }"
        >
          <i class="el-icon-s-operation"></i>
        </div>

        <!-- 导航列表 -->
        <div v-else>
          <menus ref="menusPc" @action="renderMenus"></menus>
        </div>
      </div>
    </transition>

    <div id="main-container">
      <router-view></router-view>
    </div>

    <div class="toolButton">
      <div class="backTop" v-if="toolButton" @click="toTop()">
        <!-- 回到顶部按钮 -->
        <img src="../assets/file/top.jpg" alt="" />
      </div>

      <el-popover placement="left" :close-delay="500" trigger="hover">
        <div slot="reference">
          <i
            class="fa fa-cog iconRotate"
            style="color: var(--black)"
            aria-hidden="true"
          ></i>
        </div>
        <div class="my-setting">
          <div>
            <!-- 太阳按钮 -->
            <i
              v-if="isDark"
              class="el-icon-sunny iconRotate"
              @click="changeColor()"
            ></i>
            <!-- 月亮按钮 -->
            <i
              v-else
              class="fa fa-moon-o"
              aria-hidden="true"
              @click="changeColor()"
            ></i>
          </div>
          <div>
            <i
              class="fa fa-snowflake-o"
              aria-hidden="true"
              @click="changeMouseAnimation()"
            ></i>
          </div>
        </div>
      </el-popover>
    </div>

    <!-- 点击动画 -->
    <canvas
      v-if="mouseAnimation"
      id="mousedown"
      style="
        position: fixed;
        left: 0;
        top: 0;
        pointer-events: none;
        z-index: 1000;
      "
    >
    </canvas>

    <!-- 图片预览 -->
    <div id="outerImg">
      <div id="innerImg" style="position: absolute">
        <img id="bigImg" src="" />
      </div>
    </div>

    <el-drawer
      :visible.sync="toolbarDrawer"
      :show-close="false"
      size="65%"
      custom-class="toolbarDrawer"
      title="欢迎光临"
      direction="ltr"
    >
      <menus-mobile ref="mobile" @action="renderMenus"></menus-mobile>
    </el-drawer>
  </div>
</template>

<script>
import mousedown from "../utils/mousedown";
import menus from "./common/menus.vue";
import MenusMobile from "./common/menuMobile.vue";

export default {
  data() {
    return {
      toolButton: false,
      hoverEnter: false,
      mouseAnimation: false,
      isDark: false,
      scrollTop: 0,
      toolbarDrawer: false,
      mobile: false,
    };
  },
  components: {
    menus,
    MenusMobile,
  },
  mounted() {
    if (this.mouseAnimation) {
      mousedown();
    }
    window.addEventListener("scroll", this.onScrollPage);
    if (this.isDaylight()) {
      this.isDark = true;
      let root = document.querySelector(":root");
      root.style.setProperty("--background", "#272727");
      root.style.setProperty("--fontColor", "white");
      root.style.setProperty("--borderColor", "#4F4F4F");
      root.style.setProperty("--borderHoverColor", "black");
      root.style.setProperty("--articleFontColor", "#E4E4E4");
      root.style.setProperty("--articleGreyFontColor", "#D4D4D4");
      root.style.setProperty("--commentContent", "#D4D4D4");
      root.style.setProperty("--favoriteBg", "#1e1e1e");
    }
    //菜单加载
    this.$nextTick(() => {
      if (this.$common.mobile()) {
        // this.$refs.mobile.renderMenus();
      } else {
        this.$refs.menusPc.getMenus();
      }
    });
  },
  destroyed() {
    window.removeEventListener("scroll", this.onScrollPage);
  },
  watch: {
    scrollTop(scrollTop, oldScrollTop) {
      //如果滑动距离超过屏幕高度三分之一视为进入页面，背景改为白色
      let enter = scrollTop > window.innerHeight / 2;
      const top = scrollTop - oldScrollTop < 0;
      let isShow = scrollTop - window.innerHeight > 30;
      this.toolButton = isShow;
      if (isShow && !this.$common.mobile()) {
        if (window.innerHeight > 950) {
          $(".cd-top").css("top", "0");
        } else {
          $(".cd-top").css("top", window.innerHeight - 950 + "px");
        }
      } else if (!isShow && !this.$common.mobile()) {
        $(".cd-top").css("top", "-900px");
      }

      //导航栏显示与颜色
      let toolbarStatus = {
        enter: enter,
        visible: top,
      };
      this.$store.commit("changeToolbarStatus", toolbarStatus);
    },
  },
  created() {
    let toolbarStatus = {
      enter: false,
      visible: true,
    };
    this.$store.commit("changeToolbarStatus", toolbarStatus);
    this.getWebInfo();
    this.getSortInfo();
    this.getLabelInfo();

    this.mobile = document.body.clientWidth < 1100;

    window.addEventListener("resize", () => {
      let docWidth = document.body.clientWidth;
      this.mobile = docWidth < 1100;
    });
  },
  computed: {
    toolbar() {
      return this.$store.state.toolbar;
    },
  },
  methods: {
    changeSideBar() {
      this.toolbarDrawer = !this.toolbarDrawer
      if(this.toolbarDrawer) {
        this.$refs.mobile.renderMenus();
      }
    },
    renderMenus(opt) {
      this.$store.dispatch('pushRoute', opt)
      localStorage.setItem('routeList', JSON.stringify(opt))
    },
    getWebInfo() {
      this.$createHttp
        .getWebInfo()
        .then((res) => {
          if (res.code === 200) {
            this.$store.commit("webInfo", res.data);
            if (res.data.webName) {
              document.title = res.data.webName;
            }
          }
        })
        .catch((error) => {
          this.$message({
            message: error,
            type: "error",
          });
        });
    },
    getSortInfo() {
      this.$createHttp
        .getSort()
        .then((res) => {
          if (res.code === 200) {
            this.$store.commit("sortInfo", res.data);
          }
        })
        .catch((error) => {
          this.$message({
            message: error,
            type: "error",
          });
        });
    },
    getLabelInfo() {
      this.$createHttp
        .getLabel()
        .then((res) => {
          if (res.code === 200) {
            this.$store.commit("labelInfo", res.data);
          }
        })
        .catch((error) => {
          this.$message({
            message: error,
            type: "error",
          });
        });
    },
    changeColor() {
      this.isDark = !this.isDark;
      let root = document.querySelector(":root");

      if (this.isDark) {
        root.style.setProperty("--background", "#272727");
        root.style.setProperty("--fontColor", "white");
        root.style.setProperty("--borderColor", "#4F4F4F");
        root.style.setProperty("--borderHoverColor", "black");
        root.style.setProperty("--articleFontColor", "#E4E4E4");
        root.style.setProperty("--articleGreyFontColor", "#D4D4D4");
        root.style.setProperty("--commentContent", "#D4D4D4");
        root.style.setProperty("--favoriteBg", "#1e1e1e");
      } else {
        root.style.setProperty("--background", "white");
        root.style.setProperty("--fontColor", "black");
        root.style.setProperty("--borderColor", "rgba(0, 0, 0, 0.5)");
        root.style.setProperty(
          "--borderHoverColor",
          "rgba(110, 110, 110, 0.4)"
        );
        root.style.setProperty("--articleFontColor", "#1F1F1F");
        root.style.setProperty("--articleGreyFontColor", "#616161");
        root.style.setProperty("--commentContent", "#F7F9FE");
        root.style.setProperty("--favoriteBg", "#f7f9fe");
      }
    },
    toTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    onScrollPage() {
      this.scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
    },
    isDaylight() {
      let currDate = new Date();
      if (currDate.getHours() > 22 || currDate.getHours() < 7) {
        return true;
      } else {
        return false;
      }
    },
    changeMouseAnimation() {
      this.mouseAnimation = !this.mouseAnimation;
      if (this.mouseAnimation) {
        this.$nextTick(() => {
          mousedown();
        });
      }
    },
  },
};
</script>

<style scoped>
.toolbar-content {
  width: 100%;
  height: 60px;
  color: var(--white);
  /* 固定位置，不随滚动条滚动 */
  position: fixed;
  z-index: 100;
  /* 禁止选中文字 */
  user-select: none;
  transition: all 0.3s ease-in-out;
}

.toolbar-content.enter {
  background: var(--toolbarBackground);
  color: var(--toolbarFont);
  box-shadow: 0 1px 3px 0 rgba(0, 34, 77, 0.05);
}

.toolbar-content.hoverEnter {
  background: var(--translucent);
  box-shadow: 0 1px 3px 0 rgba(0, 34, 77, 0.05);
}

.toolbar-title {
  margin-left: 30px;
  cursor: pointer;
}

.toolbar-mobile-menu {
  font-size: 30px;
  margin-right: 15px;
  cursor: pointer;
}

.scroll-menu li {
  list-style: none;
  margin: 0 12px;
  font-size: 17px;
  height: 60px;
  line-height: 60px;
  position: relative;
  cursor: pointer;
}

.scroll-menu li:hover .my-menu span {
  color: var(--themeBackground);
}

.scroll-menu li:hover .my-menu i {
  color: var(--themeBackground);
  animation: scale 1.5s ease-in-out infinite;
}

.scroll-menu li .my-menu:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  height: 6px;
  background-color: var(--themeBackground);
  width: 100%;
  max-width: 0;
  transition: max-width 0.25s ease-in-out;
}

.scroll-menu li:hover .my-menu:after {
  max-width: 100%;
}

.toolButton {
  position: fixed;
  right: 3vh;
  bottom: 3vh;
  animation: slide-bottom 0.5s ease-in-out both;
  z-index: 100;
  cursor: pointer;
  font-size: 25px;
  width: 30px;
}

.my-setting {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  cursor: pointer;
  font-size: 20px;
}

.my-setting i {
  padding: 5px;
}

.my-setting i:hover {
  color: var(--themeBackground);
}

.backTop {
  transition: all 0.3s ease-in;
  position: relative;
  top: 0;
  left: -13px;
}

.backTop:hover {
  top: -10px;
}

#outerImg {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
  width: 100%;
  height: 100%;
  display: none;
}

@media screen and (max-width: 400px) {
  .toolButton {
    right: 0.5vh;
  }
}
</style>
